<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>焦点事件练习</title>
</head>
<body>
    <div>
        <input type="text" name="" id="ipt1" value="请输入邮箱" style="color: rgb(231, 231, 231);">
        <input type="text" name="" id="ipt2" value="密码">
        <input type="button" value="搜索" style="background-color: hotpink;border: hotpink 1px solid;">
        <script>
            //获取元素
            var ipt1=document.querySelector('#ipt1')
            var ipt2=document.querySelector('#ipt2')
            //改变第一个文本框里面字体的颜色
            ipt1.onfocus=function(){
                ipt1.style.border='pink 1px solid'
                ipt1.style.outline='none'
                ipt1.value='';
                ipt1.style.color='black'
            }
        </script>
    </div>
    
</body>
</html>